@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;

@include ns.b(tab) using ($b) {
  position: relative;
  border-radius: 10rpx;
  padding: 4rpx;

  &::before {
    content: "";
    position: absolute;
    @include mixin.locate();
    background: fun.getCssVarValue(info-strokeColor);
    opacity: 0.3;
    border-radius: inherit;
  }

  @include ns.e(scroll) using ($e) {
    &,
    .uni-scroll-view,
    .uni-scroll-view-content {
      border-radius: inherit;
    }
  }

  @include ns.e(wrapper) using ($e) {
    transition: transform 0.3s linear;
    position: absolute;
    top: 0;
    left: 0;
    width: fun.getCssVarValue($b, itemWidth);
    height: fun.getCssVarValue($b, itemHeight);
    border-radius: inherit;
    background: fun.getCssVarValue(primary-backgroundColor);
  }

  @include ns.e(content) using ($e) {
    position: relative;
  }

  &-item {
    padding: 8rpx 32rpx;
    color: fun.getCssVarValue(primary-shadowColor);
    flex-shrink: 0;

    @include ns.s(active) using ($s) {
      color: fun.getCssVarValue(primary-strokeColor);
    }

    @include ns.s(disabled) using ($s) {
      color: fun.getCssVarValue(disabled-textColor);
    }
  }

  @include ns.r(x) using ($r) {
    width: fun.getCssVarValue($b, size);
    height: fit-content;

    @include ns.b($b) using ($b) {
      @include ns.e(wrapper) using ($e) {
        transform: translateX(fun.getCssVarValue($b, wrapperPosition));
      }

      @include ns.e(content) using ($e) {
        display: flex;
        align-items: center;
        width: fit-content;
      }
    }

    @include ns.s(fill-up) using ($s) {
      width: 100%;
      @include ns.b($b) using ($b) {
        @include ns.e(content) using ($e) {
          width: 100%;
        }
      }
    }
  }

  @include ns.r(y) using ($r) {
    width: fit-content;

    @include ns.b($b) using ($b) {
      @include ns.e(wrapper) using ($e) {
        transform: translateY(fun.getCssVarValue($b, wrapperPosition));
      }

      &-item {
        display: flex;
        justify-content: center;
      }

      @include ns.e(content) using ($e) {
        display: flex;
        flex-direction: column;
      }
    }

    @include ns.s(fill-up) using ($s) {
      height: 100%;
      @include ns.b($b) using ($b) {
        @include ns.e(content) using ($e) {
          height: 100%;
        }
      }
    }
  }

  @include ns.s(fill-up) using ($s) {
    @include ns.b($b) using ($b) {
      &-item {
        flex-shrink: 0;
        flex-basis: 0;
        flex-grow: 1;
        display: flex;
        justify-content: center;
      }
    }
  }
}
